import React, { useEffect, useState } from 'react'
import { store } from '../../stores'
import { Empty, List, SwipeAction, Checkbox, Stepper } from 'antd-mobile'
import styles from './cart.module.scss'
import { ShopbagOutline } from 'antd-mobile-icons'

import { price } from '../../hook'
import { changeNume, changeOne, del } from '../../stores/actionCreator'
import type { detail } from '../../type/home'
import { useHistory } from 'react-router-dom'

export default function Index () {
  const [cartList, setCartList] = useState<detail[]>([])
  const [flag, setFlag] = useState(false)
  const history = useHistory()
  useEffect(() => {
    setCartList(store.getState().CartStore)
    setFlag(cartList.every(item => item.state))
    const unsubscrible = store.subscribe(() => {
      setCartList(store.getState().CartStore)
    })
    return () => {
      unsubscrible()
    }
  }, [cartList])
  //总价
  const totalPrice = () => {
    return cartList
      .filter(item => item.state as boolean)
      .reduce(
        (total, item) =>
          total + (item.number as number) * (item.price as number),
        0
      )
  }
  return (
    <div style={{ width: '100%', height: '100%' }}>
      {cartList.length === 0 && (
        <Empty
          description='购物车是空的，赶快去挑选好货~'
          imageStyle={{ width: 128 }}
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            paddingTop: 230
          }}
        />
      )}
      {cartList.length > 0 && (
        <div className={styles.cartContainer}>
          <div className='shop'>
            <ShopbagOutline />
            <span className='shop-name'>嗨购商城</span>
          </div>
          <div>
            {cartList.map((item, index) => {
              return (
                <SwipeAction
                  key={index}
                  rightActions={[
                    {
                      key: 'delete',
                      text: '删除',
                      color: 'danger',
                      onClick: async () => {
                        store.dispatch(del(item))
                      }
                    }
                  ]}
                >
                  <div
                    className='goods-cell'
                    onClick={() => history.push(`/detail?proid=${item.proid}`)}
                  >
                    <div
                      onClick={e => {
                        e.stopPropagation()
                      }}
                    >
                      <Checkbox
                        className='checkbox'
                        checked={item.state}
                        onChange={val => {
                          store.dispatch(changeOne({ ...item, state: val }))
                        }}
                      />
                    </div>
                    <div className='goods-card'>
                      <div style={{ display: 'flex' }}>
                        <img src={item.img} style={{ width: 80, height: 90 }} />
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            marginTop: 20,
                            marginLeft: 10
                          }}
                        >
                          <span>{item.proname}</span>
                          <span
                            style={{
                              color: 'red',
                              fontSize: 15,
                              marginTop: 20
                            }}
                          >
                            {price(item.price as number)}
                          </span>
                        </div>
                      </div>
                      <footer
                        style={{ float: 'right', margin: '10px 10px' }}
                        onClick={e => {
                          e.stopPropagation()
                        }}
                      >
                        <Stepper
                          value={item.number}
                          min={1}
                          onChange={value => {
                            store.dispatch(
                              changeNume({ ...item, number: value })
                            )
                            console.log(value)
                          }}
                        />
                      </footer>
                    </div>
                  </div>
                </SwipeAction>
              )
            })}
          </div>
          {/* 底部 */}
          <div className='bottom'>
            <div
              onClick={e => {
                e.stopPropagation()
              }}
            >
              <Checkbox
                className='checkbox'
                style={{
                  width: '80px',
                  '--font-size': '14px'
                }}
                checked={flag}
                onChange={val => {
                  setFlag(val)
                  cartList.forEach(item => (item.state = val))
                }}
              >
                全选
              </Checkbox>
            </div>
            <div className='right'>
              <p style={{ fontSize: 14 }}>
                合计：
                <span style={{ fontSize: 20, color: 'red' }}>
                  ￥{price(totalPrice() as number)}
                </span>
              </p>
              <button className='bt'>提交订单</button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
